<template>
  <div>
    <!-- 单个卡券 -->
    <div v-if="o.data.type === 1">
      <div v-for="(item, index) in list" :key="index">
        <div class="pd-lg fill-base" v-if="index < 1">
          <div class="coupon-box radius-5 flex-center pt-md pb-md pl-lg">
            <div class="flex-1">
              <div
                class="flex-y-center f-title c-title ellipsis"
                style="max-width: 240px"
              >
                <div>你有一张</div>
                <div class="c-warning" style="font-size: 17px">
                  {{ item.reduce }}
                </div>
                <div>元卡券未领取</div>
              </div>
              <div
                class="flex-y-baseline f-caption mt-md rel"
                v-if="item.user.length > 0"
              >
                <div class="c-caption">已领取的用户</div>
                <div
                  class="flex-y-center c-base radius pl-md pr-md ml-sm"
                  style="background: #ff5608"
                >
                  {{ item.user[0].nickName }}
                  已领取{{ item.reduce }}元
                </div>
              </div>
            </div>
            <img
              class="coupon-box-img ml-md"
              src="https://lbqnyv2.migugu.com/coupon.png"
            />
          </div>
        </div>
      </div>
    </div>
    <!-- 卡券列表 -->
    <div v-if="o.data.type === 2">
      <div class="normal-list b-1px-b">
        <div class="flex-1">{{ o.data.title || '领取卡券' }}</div>
        <div class="c-caption f-paragraph">领取更多卡券</div>
        <div
          class="iconfont iconright"
          style="color: #999; font-size: 14px"
        ></div>
      </div>
      <div class="space-lg fill-base"></div>
      <div
        v-for="(item, index) in list"
        :key="index"
        class="fill-base pl-lg pr-lg pb-lg rel"
      >
        <div
          class="abs quan-tag flex-center"
          :class="[{ shop: item.type == 1 }]"
        >
          {{ item.type == 1 ? '线上抵用券' : '线下抵用券' }}
        </div>
        <div
          class="coupon-item"
          :class="[{ grayscale: item.record_status != 0 }]"
        >
          <div class="rel">
            <div class="flex-center pd-lg" style="padding-bottom: 0">
              <div class="flex-1">
                <div class="space-md"></div>
                <div
                  class="
                    flex-y-baseline
                    coupon-important-color
                    ellipsis
                    max-500
                  "
                >
                  <div class="text-bold flex-y-baseline f-caption">
                    ¥
                    <div class="f-big-title">{{ item.reduce }}</div>
                  </div>
                  <div class="ellipsis f-icontext c-caption ml-sm">
                    满{{ item.full }}可使用
                  </div>
                </div>
                <div class="f-paragraph c-title ellipsis max-500">
                  {{ item.title }}
                </div>
              </div>

              <div
                class="coupon-btn"
                :style="{ color: 'white', backgroundColor: '#ff4040' }"
                v-if="item.record_status == 0"
              >
                立即领取
              </div>
              <div
                v-if="item.record_status == 1"
                class="coupon-btn"
                :style="{ color: '#999', backgroundColor: '#eeeeee' }"
              >
                已领取
              </div>
            </div>
            <div class="f-caption c-caption pl-lg pr-lg pb-lg">
              到期时间：{{ item.end_time_text }}
            </div>
          </div>
          <div
            class="flex-center pt-md pb-md pl-lg pr-lg b-1px-t"
            style="background: #fcfcfc"
          >
            <div class="f-caption c-paragraph flex-1 mr-lg ellipsis">
              数量有限先来先得
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'couponList',
  props: {
    o: Object
  },
  data () {
    return {
      primaryColor: '#19c865',
      image: 'https://lbqny.migugu.com/admin/diy/default.png',
      list: [
        {
          reduce: '20',
          full: '100',
          title: '卡券标题',
          record_status: 0,
          type: 1,
          end_time_text: '2小时12分后到期',
          user: [
            {
              nickName: '萧萧'
            }
          ]
        },
        {
          reduce: '20',
          full: '100',
          title: '卡券标题',
          record_status: 0,
          // record_status: 1,
          type: 2,
          end_time_text: '2小时33分后到期',
          user: [
            {
              nickName: '萧萧'
            }
          ]
        }
      ]
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.coupon-box {
  border: 1px solid #eeeeee;
}
.coupon-box-img {
  width: 81px;
  height: 61px;
}
.normal-list {
  display: flex;
  align-items: center;
  padding: 0 16px;
  height: 50px;
  background: #fff;
  line-height: 1;
}

.coupon-item {
  background: #fff;
  border-radius: 7px;
  overflow: hidden;
  box-shadow: 0 2px 15px rgba(21, 13, 13, 0.05);
}

.coupon-important-color {
  color: #ff4040;
}

.coupon-gray {
  filter: grayscale(100%);
}

.coupon-circle-tag {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f4f6f8;
  bottom: -5px;
  z-index: 10;
}

.coupon-circle-tag.left {
  left: -5px;
}

.coupon-circle-tag.right {
  right: -5px;
}

.coupon-left {
  max-width: 100px;
}

/* 新版 */
.quan-tag {
  position: absolute;
  padding: 0 10px;
  height: 20px;
  font-size: 11px;
  color: #68a6c8;
  background: #edf8ff;
  border-radius: 0 0 13px 0;
  top: 0;
  left: 16px;
  z-index: 1;
}

.quan-tag.shop {
  color: #ff4b49;
  background: #ffe2e2;
}

.grayscale .c-title {
  color: #999999;
}
.coupon-btn {
  display: inline-block;
  line-height: 27px;
  padding: 0 8px;
  min-width: 65px;
  font-size: 12px;
  border-radius: 27px;
  text-align: center;
}
</style>
